<template>
     <div class="search">
      <div class="input">
          <div class="left">
            <div class="keyword">
                <div class="live">
                    住
                </div>
                <div class="leave">
                    离
                </div>
            </div>
            <div class="time">
                <div class="startTime">{{ formatDate(startTime,"MM.DD") }}</div>
                <div class="endTime">{{ formatDate(endTime,"MM.DD") }}</div>
            </div>
        </div>
        <div class="center">
            关键字/位置/民宿
        </div>
        <div class="right">
            <i class="icon_search"></i>
        </div>
      </div>
     </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import useHomeStore from "../../../stores/modules/homeStore"
import {formatDate} from "../../../utils/formatDate"
const store = useHomeStore();
const { startTime, endTime } = storeToRefs(store);


</script>

<style lang="less" scoped>
.search
{
    position: fixed;
    z-index: 9;
    top: 0;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-grow: 1;
    height: 50px;
    width: 100%;
    background-color: #fff;
    border: #999 solid 1px;
    .input
    {
       display: flex;
       justify-content: space-between;
       width: 95%;
       height: 45px;
       background-color: #eeee;
       padding: 3px;
       border-radius: 10px;
       margin: 2px;
       .left
       {
          font-size: 12px;
          display: flex;
          
          
          .keyword
          {
            color: #777;
            margin-top: 10px;
            .live
            {
                margin-bottom: 2px;
            }            
          }

          .time
          {
             font-size: 12px;
             color: #666;
             margin-top: 11px;
             margin-left: 4px;
          }
       }

       .center
       {
          display: flex;
          align-items: center;
          justify-content: left;
          font-size: 14px;
          color: #999;
          width: 60%;
       }


       .right
       {
          position: relative;
          width: 20%;
          .icon_search
          {
            position: absolute;
            right:5px;
            top:10px;
            background-image:url('../image/search.png');
            background-size: cover;
            width: 30px;
            height: 23px;
            display: inline-block;
          }
       }
    }
}
</style>